<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 客户信息维护</title>
    <link rel="shortcut icon" href="../../../content/static/img/favicon.ico">
    <link href="../../content/static/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="../../content/static/css/plugins/steps/jquery.steps.css" rel="stylesheet">
    <link href="../../content/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../../content/static/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="../../content/static/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../../content/static/css/animate.min.css" rel="stylesheet">
    <link href="../../content/static/css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="../../content/static/js/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" />
    <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous"> -->
    <style type="text/css">
        /* .jstree-open>.jstree-anchor>.fa-folder:before{content:"\f07c"}.jstree-default .jstree-icon.none{width:0}; */
        .left_tree {
            width: 20%;
            float: left;
            padding: 0px 0px 0px 10px;
        }

        .middle_a {
            margin: -8px 0px 0px -18px;
        }

        .rigth_list {
            width: 80%;
            float: left;
            border-left: 4px solid #eee
        }

        .rigth_list_show {
            width: 100%;
            float: left;
            border-left: 4px solid #eee
        }
        .btn_more{
            padding: 20px 0px;
            text-align: center !important;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div style="width: 100%;">
                <div class="left_tree" id="vid_left">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <small>用户分类</small>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div id="jstree1">
                                    <ul>
                                        <li class="jstree-open">用户分类
                                            <ul>
                                                <li>css
                                                    <ul>
                                                        <li data-jstree='{"type":"css"}'>animate.css</li>
                                                        <li data-jstree='{"type":"css"}'>bootstrap.css</li>
                                                        <li data-jstree='{"type":"css"}'>style.css</li>
                                                    </ul>
                                                </li>
                                                <li>email-templates
                                                    <ul>
                                                        <li data-jstree='{"type":"html"}'>action.html</li>
                                                        <li data-jstree='{"type":"html"}'>alert.html</li>
                                                        <li data-jstree='{"type":"html"}'>billing.html</li>
                                                    </ul>
                                                </li>
                                                <li>fonts
                                                    <ul>
                                                        <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.eot</li>
                                                        <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.svg</li>
                                                        <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.ttf</li>
                                                        <li data-jstree='{"type":"svg"}'>glyphicons-halflings-regular.woff</li>
                                                    </ul>
                                                </li>
                                                <li class="jstree-open">img
                                                    <ul>
                                                        <li data-jstree='{"type":"img"}'>profile_small.jpg</li>
                                                        <li data-jstree='{"type":"img"}'>angular_logo.png</li>
                                                        <li class="text-navy" data-jstree='{"type":"img"}'>html_logo.png</li>
                                                        <li class="text-navy" data-jstree='{"type":"img"}'>mvc_logo.png</li>
                                                    </ul>
                                                </li>
                                                <li class="jstree-open">js
                                                    <ul>
                                                        <li data-jstree='{"type":"js"}'>hplus.js</li>
                                                        <li data-jstree='{"type":"js"}'>bootstrap.js</li>
                                                        <li data-jstree='{"type":"js"}'>jquery-2.1.1.js</li>
                                                        <li data-jstree='{"type":"js"}'>jquery-ui.custom.min.js</li>
                                                        <li class="text-navy" data-jstree='{"type":"js"}'>jquery-ui-1.10.4.min.js</li>
                                                    </ul>
                                                </li>
                                                <li data-jstree='{"type":"html"}'>affix.html</li>
                                                <li data-jstree='{"type":"html"}'>dashboard.html</li>
                                                <li data-jstree='{"type":"html"}'>buttons.html</li>
                                                <li data-jstree='{"type":"html"}'>calendar.html</li>
                                                <li data-jstree='{"type":"html"}'>contacts.html</li>
                                                <li data-jstree='{"type":"html"}'>css_animation.html</li>
                                                <li class="text-navy" data-jstree='{"type":"html"}'>flot_chart.html</li>
                                                <li class="text-navy" data-jstree='{"type":"html"}'>google_maps.html</li>
                                                <li data-jstree='{"type":"html"}'>icons.html</li>
                                                <li data-jstree='{"type":"html"}'>inboice.html</li>
                                                <li data-jstree='{"type":"html"}'>login.html</li>
                                                <li data-jstree='{"type":"html"}'>mailbox.html</li>
                                                <li data-jstree='{"type":"html"}'>profile.html</li>
                                                <li class="text-navy" data-jstree='{"type":"html"}'>register.html</li>
                                                <li data-jstree='{"type":"html"}'>timeline.html</li>
                                                <li data-jstree='{"type":"html"}'>video.html</li>
                                                <li data-jstree='{"type":"html"}'>widgets.html</li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="rigth_list" id="vid_rigth">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <ol class="breadcrumb">
                                <li><a>用户信息</a></li>
                                <li><a>用户信息维护</a></li>
                            </ol>
                        </div>
                        <div class="ibox-content">
                            <blockquote>
                                <!-- <small><strong>杜牧</strong>-<cite title="" data-original-title="">《寄扬州韩绰判官》</cite></small> -->
                                <small>基本信息</small>
                            </blockquote>
                            <form class="form-horizontal m-t" id="signupForm" novalidate="novalidate" style="border-top: 1px solid #1ab497;">
                                <div class="form-group" style="margin-top: 15px">
                                    <label class="col-sm-1 control-label tooltip-demo">编号
                                        <label class="fa fa-info-circle" data-toggle="tooltip" data-placement="bottom"
                                            title="" data-original-title="该客户的唯一编码,系统自动生成"></label>
                                    </label>
                                    <div class="col-sm-3">
                                        <input id="firstname" name="firstname" class="form-control" type="text">
                                    </div>
                                    <label class="col-sm-1 control-label">姓名</label>
                                    <div class="col-sm-3">
                                        <input id="lastname" name="lastname" class="form-control" type="text"
                                            aria-required="true" aria-invalid="false">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">联系人</label>
                                    <div class="col-sm-3">
                                        <input id="password" name="password" class="form-control" type="password">
                                    </div>
                                    <label class="col-sm-1 control-label">联系电话</label>
                                    <div class="col-sm-3">
                                        <input id="confirm_password" name="confirm_password" class="form-control" type="password">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">用户状态</label>
                                    <div class="col-sm-3">
                                        <div class="radio i-checks">
                                            <label><input type="radio" checked value="option3" name="b"> <i></i> 启用</label>
                                            <label><input type="radio" value="option4" name="b"> <i></i> 禁用</label>
                                        </div>
                                    </div>
                                    <label class="col-sm-1 control-label">性别</label>
                                    <div class="col-sm-3">
                                        <div class="radio i-checks">
                                            <label><input type="radio" value="option1" name="a"> <i></i> 男</label>
                                            <label><input type="radio" checked="" value="option2" name="a"> <i></i> 女</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">初期欠款</label>
                                    <div class="col-sm-3">
                                        <input id="username" name="username" class="form-control" type="text"
                                            aria-required="true" aria-invalid="true">
                                    </div>
                                    <label class="col-sm-1 control-label">业务员</label>
                                    <div class="col-sm-3">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="test_data">
                                            <div class="input-group-btn">
                                                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                                    <span class="caret"></span>
                                                </button>
                                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">联系地址</label>
                                    <div class="col-sm-3">
                                        <textarea id="ccomment" name="comment" class="form-control" required=""
                                            aria-required="true"></textarea>
                                    </div>
                                    <label class="col-sm-1 control-label">客户等级</label>
                                    <div class="col-sm-3">
                                        <input id="username" name="username" class="form-control" type="text"
                                            aria-required="true" aria-invalid="true">
                                    </div>
                                </div>
                                <div class="middle_a" onclick="showOrHideClientClass(this)"><i title="点我试试" style="font-size: 18px;color: #1ab497"
                                        class="fa fa-hand-o-left"></i></div>
                            </form>
                        </div>
                        <div class="ibox-content" style="border-bottom: 1px solid #eee">
                            <blockquote>
                                <small>其他信息</small>
                            </blockquote>
                            <form class="form-horizontal m-t" novalidate="novalidate" style="border-top: 1px solid #1ab497;">
                                <div class="form-group" style="margin-top: 15px">
                                    <label class="col-sm-1 control-label">上传头像</label>
                                    <div class="col-sm-3">
                                        <div class="file-loading">
                                            <input id="file-es" name="file-es[]" type="file">
                                            <!-- multiple -->
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">微信</label>
                                    <div class="col-sm-3">
                                        <input id="lastname" name="lastname" class="form-control" type="text"
                                            aria-required="true" aria-invalid="false">
                                    </div>
                                    <label class="col-sm-1 control-label">单位电话</label>
                                    <div class="col-sm-3">
                                        <input id="lastname" name="lastname" class="form-control" type="text"
                                            aria-required="true" aria-invalid="false">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">邮箱</label>
                                    <div class="col-sm-3">
                                        <input id="lastname" name="lastname" class="form-control" type="text"
                                            aria-required="true" aria-invalid="false">
                                    </div>
                                    <label class="col-sm-1 control-label">邮编</label>
                                    <div class="col-sm-3">
                                        <input id="lastname" name="lastname" class="form-control" type="text"
                                            aria-required="true" aria-invalid="false">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-1 control-label">传真</label>
                                    <div class="col-sm-3">
                                        <input id="lastname" name="lastname" class="form-control" type="text"
                                            aria-required="true" aria-invalid="false">
                                    </div>
                                    <label class="col-sm-1 control-label">备注</label>
                                    <div class="col-sm-3">
                                        <input id="lastname" name="lastname" class="form-control" type="text"
                                            aria-required="true" aria-invalid="false">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div role="application" class="wizard clearfix">
                            <div class="actions clearfix btn_more">
                                <ul role="menu" aria-label="分页">
                                    <li aria-disabled="true"><a href="#previous" role="menuitem">保存</a></li>
                                    <li aria-hidden="false" aria-disabled="false"><a href="#next" role="menuitem">保存并复制新增</a></li>
                                    <li aria-hidden="false"><a href="#finish" role="menuitem">保存至草稿箱</a></li>
                                    <li class="disabled"><a href="#cancel" role="menuitem">取消</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../content/static/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../content/static/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="../../content/static/js/plugins/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="../../content/static/js/plugins/bootstrap-fileinput/js/plugins/sortable.js"></script>
    <script src="../../content/static/js/plugins/bootstrap-fileinput/js/locales/zh.js"></script>
    <!-- <script src="../../content/static/js/content.min.js?v=1.0.0"></script> -->
    <script src="../../content/static/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="../../content/static/js/plugins/validate/messages_zh.min.js"></script>
    <script src="../../content/static/js/plugins/iCheck/icheck.min.js"></script>
    <script src="../../content/static/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script src="../../content/static/js/plugins/jsTree/jstree.min.js"></script>
    <script>
        function showOrHideClientClass(obj) {
            var fl = $("#vid_left").hasClass("left_tree");
            if (fl) {
                $("#vid_left").hide();
                $("#vid_left").removeClass("left_tree");
                $("#vid_rigth").removeClass("rigth_list").addClass("rigth_list_show");
                $(obj).children().removeClass("fa fa-hand-o-left").addClass("fa fa-hand-o-right");
            } else {
                $("#vid_left").show();
                $("#vid_left").addClass("left_tree");
                $("#vid_rigth").removeClass("rigth_list_show").addClass("rigth_list");
                $(obj).children().removeClass("fa fa-hand-o-right").addClass("fa fa-hand-o-left");
            }
        }
        $(document).ready(function () {
            $('#file-es').fileinput({
                language: 'zh',
                uploadUrl: '#',
                allowedFileExtensions: ['jpg', 'png', 'gif']
            });
            $(".i-checks").iCheck({
                checkboxClass: "icheckbox_square-green",
                radioClass: "iradio_square-green",
            });
            $("#jstree1").jstree({
                "core": {
                    "check_callback": true
                },
                "plugins": ["types", "dnd"],
                "types": {
                    "default": {
                        "icon": "fa fa-folder"
                    },
                    "html": {
                        "icon": "fa fa-file-code-o"
                    },
                    "svg": {
                        "icon": "fa fa-file-picture-o"
                    },
                    "css": {
                        "icon": "fa fa-file-code-o"
                    },
                    "img": {
                        "icon": "fa fa-file-image-o"
                    },
                    "js": {
                        "icon": "fa fa-file-text-o"
                    }
                }
            });
        });
        var testdataBsSuggest = $("#test_data").bsSuggest({
            indexId: 2,
            indexKey: 1,
            data: {
                "value": [{
                    "id": "0",
                    "word": "lzw",
                    "description": "http://lzw.me"
                }, {
                    "id": "1",
                    "word": "lzwme",
                    "description": "http://w.lzw.me"
                }, {
                    "id": "2",
                    "word": "meizu",
                    "description": "http://www.meizu.com"
                }, {
                    "id": "3",
                    "word": "flyme",
                    "description": "http://flyme.meizu.com"
                }],
                "defaults": "http://lzw.me"
            }
        });
    </script>
</body>

</html>